@()(implicit request: play.api.mvc.RequestHeader)
	@main("Genome alignment (LASTZ)") {

		<style>
			#axtString{
				max-height: 300px;
			}

		</style>

		<div class="row">
			<div class="form-group col-sm-12">
				<h2 class="page-heading"
				style="text-align: left;
					border-bottom: 5px solid #e9f3f4">Genome alignment (LASTZ)</h2>
			</div>
		</div>

		<form class="registration-form form-horizontal" id="form"
		accept-charset="UTF-8" method="post">

			<div class="form-group" >
				<label class="control-label col-sm-2">Enter target sequence:</label>
				<div class="col-sm-8">
					<textarea class="form-control monospace" name="targetText" rows="5"></textarea>
					<span class="help-block">e.g.,&nbsp;<a href="#"><em id="egTarget">
						example</em></a></span>
				</div>
			</div>

			<div class="form-group">
				<label class="control-label col-sm-2">Or, upload file:</label>
				<div class="col-sm-8">
					<input  type="file" class="file control-label" name="targetFile" data-show-preview="false"
					data-show-upload="false">
					<span class="help-block"><a onclick="showTargetExampleFile()"><em>
						Example file</em></a></span>
				</div>
			</div>

			<div class="form-group" >
				<label class="control-label col-sm-2">Enter query sequences:</label>
				<div class="col-sm-8">
					<textarea class="form-control monospace" name="queryText" rows="5"></textarea>
					<span class="help-block">e.g.,&nbsp;<a href="#"><em id="egQuery">
						example</em></a></span>
				</div>
			</div>

			<div class="form-group">
				<label class="control-label col-sm-2">Or, upload file:</label>
				<div class="col-sm-8">
					<input  type="file" class="file control-label" name="queryFile" data-show-preview="false"
					data-show-upload="false">
					<span class="help-block"><a onclick="showQueryExampleFile()"><em>
						Example file</em></a></span>
				</div>
			</div>

			<div class="form-group">
				<div class="actions col-sm-offset-2 col-sm-2">
					<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="mySearch()">
						Run</button>
				</div>

				<div class="actions  col-sm-2">
					<button type="reset" class="btn btn-primary" style="width: 90%;">
						Reset</button>
				</div>
			</div>

		</form>

	<div id="result"  style="display: none">
		<hr>
		<h4 style="color: black" id="missionResult">Result:</h4>
		<h5>Axt result:
			&nbsp;<button class="btn btn-primary" onclick="downloadAxt()"><i class="fa fa-download"></i>&nbsp;Download</button>
		</h5>
		<pre id="axtString" style="background-color: white"></pre>


		<div id="download" style="margin-top: 20px">
			<button type="button" class="btn btn-primary" id="deleteButton" onclick="downloadPng1()"
			style="margin-bottom: 10px">
				<i class="fa fa-download"></i>&nbsp;download Parallel result file
			</button>
		</div>
		<div  id="charts">
			<div>no picture result！</div>
		</div>

		<div id="download">
			<button type="button" class="btn btn-primary" id="deleteButton" onclick="downloadPng2()"
			style="margin-bottom: 10px">
				<i class="fa fa-download"></i>&nbsp;download Xoy result file
			</button>
		</div>
		<div  id="charts1">
			<div>no picture result！</div>
		</div>

	</div>

		<script>
				var targetSeq
				var querySeq
				var base641;
				var base642;

				$(function () {

					$.ajax({
						url: "@routes.ToolController.getExampleText()?fileName=Ke.fasta",
						type: "get",
						async:false,
						success: function (data) {
						    targetSeq=data
						}
					});

					$.ajax({
						url: "@routes.ToolController.getExampleText()?fileName=Kg.fasta",
						type: "get",
						async:false,
						success: function (data) {
							querySeq=data
						}
					});

					$('#egTarget').click(function () {
						$("textarea[name='targetText']").val(targetSeq);
					});
					$('#egQuery').click(function () {
						$("textarea[name='queryText']").val(querySeq);
					});

				})

				function downloadAxt() {
					var fileName = "all.axt"
					var content = $("#axtString").text()
					var blob = new Blob([content], {
						type: "text/plain;charset=utf-8"
					})
					saveAs(blob, fileName)
				}

				function targetCheck() {
					var text = $("textarea[name='targetText']").val()
					var file = $("input[name='targetFile']").val()
					var b = true
					if (!file && !text) {
						b = false
						swal("Error", "Please enter sequence or upload file!", "error")
					} else if (file && text) {
						b = false
						swal("Error", "Please either enter target sequence into the box or upload a file, not both!", "error")
					}
					return b
				}

				function queryCheck() {
					var text = $("textarea[name='queryText']").val()
					var file = $("input[name='queryFile']").val()
					var b = true
					if (!file && !text) {
						b = false
						swal("Error", "Please enter sequence or upload file!", "error")
					} else if (file && text) {
						b = false
						swal("Error", "Please either enter query sequence into the box or upload a file, not both!", "error")
					}
					return b
				}

				function showTargetExampleFile() {
					var w = window.open()
					$(w.document.body).html("<pre>"+targetSeq+"</pre>")
				}
				function showQueryExampleFile() {
					var w = window.open()
					$(w.document.body).html("<pre>"+querySeq+"</pre>")
				}
				function mySearch() {
					var form = $("#form")
					if ( targetCheck() && queryCheck()) {
						var form1 = new FormData($("#form")[0]);
						var element = "<div id='content'><span id='info'>Running...</span>&nbsp;<img class='runningImage' src='@routes.Assets.at("images/running2.gif")' style='width: 30px;height: 20px;'></div>"
						var index = layer.alert(element, {
							skin: 'layui-layer-molv'
							, closeBtn: 0,
							title: "Info",
							btn: []
						});
						$.ajax({
							url: "@routes.ToolsController.mummer()",
							type: "post",
							processData: false,
							contentType: false,
							data: form1,
							success: function (data) {
								layer.close(index)
								if (data.valid == "false") {
									swal("Error", data.message, "error")
									$("#result").hide()
								} else {
									base641 = data.base641
									base642 = data.base642
									$("#charts").html("<img src='data:image/png;base64," + data.base641 + "' style='width:100%'>")
									$("#charts1").html("<img src='data:image/png;base64," + data.base642 + "' style='width:100%'>")
									$("#axtString").text(data.axtString)
									$("#result").show()
								}
							}
						});
					}
				}

				function downloadPng1() {
					var fileName = "Target-Query.parallel.png"
					var byteArrays = base642binaryArray(base641)
					var blob = new Blob(byteArrays, {
						type: "image/png"
					})
					saveAs(blob, fileName)
				}

				function base642binaryArray(content) {
					var byteCharacters = atob(content);
					var byteArrays = [];
					var sliceSize = 512
					for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
						var slice = byteCharacters.slice(offset, offset + sliceSize);
						var byteNumbers = new Array(slice.length);
						for (var i = 0; i < slice.length; i++) {
							byteNumbers[i] = slice.charCodeAt(i);
						}
						var byteArray = new Uint8Array(byteNumbers);
						byteArrays.push(byteArray);
					}
					return byteArrays
				}

				function downloadPng2() {
					var fileName = "Target-Query.xoy.png"
					var byteArrays = base642binaryArray(base642)
					var blob = new Blob(byteArrays, {
						type: "image/png"
					})
					saveAs(blob, fileName)
				}

		</script>


	}
